<template>
  <div :style="{backgroundColor: bgColor,color: '#FFFFFF'}"
       style="padding: 20px;display: flex;justify-content: space-between;">
    <div>
      <div style="font-size: 14px;">{{ label }}</div>
      <div style="font-size: 42px;margin-top: 5px;" v-if="!clickAble">{{ value }}</div>
      <div style="font-size: 42px;margin-top: 5px;" v-if="clickAble">
        <a style="text-decoration: underline;" @click="handleValueClick">{{ value }}</a>
      </div>
    </div>
    <div>
      <i :class="icon" style="font-size: 48px;"></i>
    </div>
  </div>
</template>

<script>
import {background} from "quill/ui/icons";

export default {
  name: "SummaryItem",
  props: {
    bgColor: {
      type: String,
      default: '#4ab4d5'
    },
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: 'el-icon-s-data'
    },
    clickAble: {
      type: Boolean,
      default: false
    },
    clickCallback: {
      type: Function,
      default: () => {
      }
    }
  },
  methods: {
    handleValueClick() {
      this.clickCallback()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
